<template>
	<view >
		<view class="comment-container" 
		@longpress="handleLongPress">
			<!-- 评论头像 -->
			<view class="comment-first-avatar">
				<image 
					:class="{'avatar':true,'second-avatar':props.isSecond}" 
					:src="props.data.avatar" 
					mode="aspectFill"></image>
			</view>
			<!-- 评论内容 -->
			<view class="comment-first">
				<view class="comment-right">
					<view class="comment-user">
						{{props.data.user_name}}
						<template v-if="props.data.last_comment">
							<view class="comment-triangle"></view>
							{{props.data.last_comment}}
						</template>
						</view>
					<view class="comment-content">
						{{shrinkContent}}
						  <span  
							  class="shrink"  
							  v-if="isLong"  
							  @click="expandContentFun"  
							  v-show="isShrink"  
							>...展开</span>  
							<span  
							  class="shrink"  
							  v-if="isLong"  
							  @click="expandContentFun"  
							  v-show="!isShrink"  
							>收起</span>  	
					</view>
					<!-- 评论时间，点赞，回复 -->
					<view class="comment-bottom">
						<view>
							<text>{{formatTime(props.data.create_time)}}</text>	
							<text class="dot">·</text>
							<text>{{props.data.publish_address}}</text>
							<text class="replies" @click="handleReply(props.data)">回复</text>
						</view>
						<Likes
							:likes="props.data.likes_count" 
							:likes_status="props.data.likes_status"
							@update:likes_status="handleLikes"/>
					</view>
				</view>
			</view>
		</view>	
		<!-- 回复评论 -->
		<reply-input 
			:postId="props.data" 
			:customPlaceholder="placeholder"  
			commentTwo="true"/>
		<Report 
			:showReport="showReport" 
			:reportType="reportType"
			@update:report="handleReport"/>
	</view>
</template>

<script lang="ts" setup name="">
	import Likes from '../likes/likes.vue'
	import Report from '../report/report.vue'
	import replyInput from '../../components/replyInput/replyInput.vue'
	import formatTime from '../../common/formatTime.js'
	import { reactive,ref, watch } from 'vue'
	import { usereplyStore } from '../../store/modules/reply'
	import {postReport} from '../../apis/report'
	const replyStore = usereplyStore();
	
	const props = defineProps({
	  // 评论数据
	  data: {
	    type: Object,
	    default: () => {},
	  },
		  
	  isSecond: {
		  type: Boolean,
		  default: false,
	  }
	});
	
	
	
	// 评论过长处理
	let contentShowLength = 70; // 默认显示评论字符
	let content = props.data.content;
	let isLong = ref(content.length > contentShowLength); // 是否大于
	let isShrink = ref(true); // 是否收缩
	// 如果大于则收缩，
	// 如果大于不收缩则展开
	let shrinkContent = ref("");
	// 举报操作菜单
	let showReport = ref(false)
	let reportType	 = reactive([
		{ name: '站外导流' },  
		{ name: '违法违规' },  
		{ name: '色情低俗' },
		{ name: '低差广告' },
		{ name: '虚假不实' },
		{ name: '不友善，引战' },
		{ name: '时政不实信息' },
		{ name: '诱导关注点赞' },
		// { name: '涉及未成年人' },
		// { name: '网络暴力' },
		// { name: '疑似自残自杀' },
	])
	const stopWatch = watch(isShrink,(newValue,oldValue)=>{
		shrinkContent.value = newValue
			  ? content.slice(0, contentShowLength + 1)
			  : content;
		}, {immediate: true})
		
	// 展开评论
	function expandContentFun() {
	  isShrink.value = !isShrink.value;
	}
	// 举报帖子操作菜单显示与隐藏
	function handleReport(newStatus:boolean){
		showReport.value = newStatus;
	}
	// 举报接口
	async function report(){
		console.log(props.post);
		// const res = await postReport({
		// 	report_type:2,
		// 	report_id:props.post.user_post.id,
		// 	reason:3,
		// 	reported_user_id:props.post.user.user_id,
		// })
	}
	function setActionSheetItems(isUser) {
		console.log(isUser);
	    let itemList = [];  
	    switch (isUser) {  
	        case 'true':  //如果是作者
	            itemList = ['举报','回复', '删除'];  
	            break;  
	        case 'false':  
	            itemList = ['举报']; // 用户可能只有回复和举报的权限  
	            break;  
	    }  
	    return itemList;  
	}  
	//长按回复，删除，举报评论
	function handleLongPress(){
		console.log("长按事件");
		let itemList = setActionSheetItems("true"); // 根据身份设置操作菜单选项  
		uni.showActionSheet({
			itemList: itemList,
			success: function (res) {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				console.log(res);	
				if(res.tapIndex === 0){
					console.log("举报");
					showReport.value = true;
					report();
					
				}
				else if(res.tapIndex === 1){
					console.log("回复");
					// handleReply();
				}
				else if(res.tapIndex === 2){
					console.log("删除");
					uni.showModal({
						title: '确定删除此评论',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} 
							else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				
				
				
			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	

	
	const placeholder = ref('回复')
	let hasSetUserName = false;	
	// 回复评论	
	function handleReply(val){	
		console.log('回复评论');
		console.log(val);
		
		 if (!hasSetUserName) {  
			// 如果还没有设置过，就设置它，并更新标志  
			placeholder.value = placeholder.value + val.user_name;  
			hasSetUserName = true; // 更新标志，表示已经设置过  
		}  
		replyStore.show2();
	}
	
	// 点赞评论
	function handleLikes(newStatus:boolean){
		// comment.likes_status = newStatus;
		// if(newStatus){
		// 	comment.likes_count += 1;
		// }
		// else{
		// 	comment.likes_count -= 1;
		// }
	}
	
	
	// let reportType	 = reactive([
	// 	{ name: '站外导流' },  
	// 	{ name: '违法违规' },  
	// 	{ name: '色情低俗' },
	// 	{ name: '低差广告' },
	// 	{ name: '虚假不实' },
	// 	{ name: '不友善，引战' },
	// 	{ name: '时政不实信息' },
	// 	{ name: '诱导关注点赞' },
	// 	{ name: '涉及未成年人' },
	// 	{ name: '网络暴力' },
	// 	{ name: '疑似自残自杀' },
	// ])
	// function handleReport(index){
	// 	console.log(index);
	// 	//举报接口
	// }
</script>

<style scoped lang="scss">
	
	.long-pressed{
	    background:$bg;
	}
	.comment-container{
		display: flex;
		color: $text;
		font-size: 25upx;
		padding:15upx 30upx 10upx 30upx;
		.comment-first-avatar{
			width: 12%;	
			.avatar{
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
			}
			.second-avatar{
				width: 50upx;
				height: 50upx;
			}
		}
		.comment-first{
			width: 88%;
			.comment-right{
				.comment-user{
					display: flex;
					align-items: center;
					.comment-triangle{
						margin: 0 5upx 0 10px;
						width: 0;  
						height: 0;  
						border-width: 10upx;
						border-style: solid;
						border-color: transparent transparent transparent $text;
					}
				}
				
				.comment-content{
					color: black;
					font-size: 30upx;
					margin: 5upx 0;
					.shrink{
						color: $text;
						font-size: 25upx
					}
				}
				
				.comment-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
						
					.dot{
						margin: 0 10upx;
						font-size: 20upx;
						font-weight: bold;
					}
						
					.replies{
						margin-left: 10upx;
					}
				}
			}				
		}
	}
	// .replies-detail{
	// 	display: flex;
	// 	align-items: flex-end;
	// 	padding: 20upx;
			
	// 	.replies-textarea{
	// 		background-color: pink !important;
	// 		padding: 15upx 25upx !important;
	// 		border-radius: 50upx !important;
	// 		margin-right: 20upx;
			
	// 	}
	// 	////////////////////////
	// 	.btn{
	// 		color:white;
	// 		background-color:$primary;
	// 		border-radius: 50rpx;
	// 		height: 70upx;
	// 		line-height: 70upx;
	// 		font-size: 25upx;
			
	// 	}
	// }
</style>